<template>
  <el-container class="contain">
    <TreeFilter
      v-show="showTree"
      label="name"
      title="列表"
      :data="treeData"
      :default-value="initParam.departmentId"
      @change="changeTreeFilter"
      class="menu-tree"
      :is-input="false"
      :is-all="false"
      style="width: 180px; height: 100%"
      accordion
    />
    <el-container style="width: calc(100% - 180px)">
      <normalCard :title="currentTitle">
        <template v-if="currentType === 'excel'">
          <ShareExcel :link="excelPath" />
        </template>
        <template v-else-if="currentType === 'bar'">
          <div class="main-flex">
            <div class="item" v-for="(item, index) in items" :key="index">
              <div class="chartTitle">{{ item.title }}</div>
              <BarLineChart
                :data="item.data"
                :legend-data="item.legendData"
                :x-label="item.xLabel"
                :rotate="item.rotate"
                ref="barLineChart"
                :key="item.title"
              />
            </div>
          </div>
        </template>
        <template v-else-if="currentType === 'line'">
          <div class="main-flex">
            <div class="item" v-for="(item, index) in items" :key="index">
              <div class="chartTitle">{{ item.title }}</div>
              <BarLineChart
                :data="item.data"
                :legend-data="item.legendData"
                :x-label="item.xLabel"
                :rotate="item.rotate"
                ref="barLineChart"
                :key="item.title"
              />
            </div>
          </div>
        </template>
        <template v-else>
          <TsxTablePage :tables="tableData" @click-event="keyIndicatorsDialog" />
        </template>
      </normalCard>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from "vue";
import normalCard from "../../components/normalCard.vue";
import ShareExcel from "@/components/ShareExcel/index.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { useShareStore } from "@/stores/modules/share";
import BarLineChart from "@/components/ECharts/components/barLineChart.vue";
import { getTabList } from "@/api/modules/ceshidata";
import TsxTablePage from "./components/TsxtablePage.vue";

const shareStore = useShareStore();
console.log("shareStore", shareStore.title, shareStore.data);
interface TreeNode {
  id: string;
  name: string;
  type: "bar" | "excel" | "table" | "line";
  data: any;
  children?: TreeNode[]; // 子节点，用于表示层级结构
}

const treeData = ref<TreeNode[]>([]);
const fetchTreeData = async () => {
  const data = await getTabList(shareStore.title);
  treeData.value = data as TreeNode[];
  // 设置默认选中第一个节点的 id
  if (treeData.value.length > 0) {
    initParam.departmentId = treeData.value[0].id;
    updateContent();
  }
};

const items = ref<any[]>([]);
const showTree = ref(true);
const initParam = reactive({ departmentId: "1" });

const currentNode = computed(() => {
  return findNodeById(treeData.value, initParam.departmentId);
});
const currentType = computed(() => currentNode.value?.type);
const currentTitle = computed(() => currentNode.value?.name);
const excelPath = computed(() => (currentNode.value?.type === "excel" ? currentNode.value.data : ""));
const tableData = computed(() => (currentNode.value?.type === "table" ? currentNode.value.data : []));
const updateContent = () => {
  if (currentType.value === "bar" || currentType.value === "line") {
    items.value = currentNode.value?.data || [];
  }
};

const findNodeById = (nodes: TreeNode[], id: string): TreeNode | null => {
  for (const node of nodes) {
    if (node.id === id) return node;
    if (node.children) {
      const found = findNodeById(node.children, id);
      if (found) return found;
    }
  }
  return null;
};

const changeTreeFilter = (val: string) => {
  console.log("changeTreeFilter", val);
  initParam.departmentId = val;
  updateContent();
};

const keyIndicatorsDialog = (name, flag) => {
  console.log("keyIndicatorsDialog", name, flag);
  items.value = [];
  initParam.departmentId = "1-1"; // Optionally reset departmentId
  updateContent(); // Update content after resetting
};

onMounted(() => {
  fetchTreeData();
  updateContent();
});
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
